<template>
	<!-- 内容详情 -->
	<view class="">
		<view class="cart_list" v-if="state < 2">
			<view class="cart_list_img" v-show="!goods">
				<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/ddcef58feb3f4048818957c8c05c7fe3.png"
					mode="widthFix"></image>
			</view>
			<view class="goods_info" v-for="(item,index) in goods" :key="item.goods_id">
				<view class="select" @click="select(index,item.id)">
					<image :src="seleState[index]?select_url[1]:select_url[0]"></image>
				</view>
				<view class="info">
					<view class="placard">
						<image :src="item.images" mode=""></image>
					</view>
					<view class="details_info">
						<view class="info_title">
							<text>明日发</text>
							<text>{{item.title}}</text>
						</view>
						<view class="detail">
							<text>金重：约{{item.gold_weight}}g</text>
							<text>款号：{{item.bar_code}}</text>
						</view>
						<view class="detail">
							<text>规格：{{item.spec[0].value}}</text>
						</view>
						<view class="detail">
							<text>定货周期：30天</text>
						</view>
						<view class="price">
							<text>定金：￥{{((item.price)*1).toFixed(2)}}</text>
							<view class="add" v-if="(item.is_error || 0) != 1 && common_site_type != 1">
								<!-- <text @click="compute_buy_num(-1,index)">-</text>
								<text>{{buyNumber[index]}}</text>
								<text @click="compute_buy_num(1,index)">+</text> -->
								<text @click="goods_buy_number(-1,index)">-</text>
								<input @blur="goods_buy_number_blur" type="number" :value="buyNumber[index]"
									:data-index="index">
								<text @click="goods_buy_number(1,index)">+</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 笔记 -->
		<view class="note_list" v-if="state===2" v-for="(item,index) in noteList" :key="item.noteCartId">
			<view class="select" @click="select(index,item.noteCartId)">
				<image :src="noteState[index]?select_url[1]:select_url[0]"></image>
			</view>
			<view class="note_list_img" >
				<image :src="item.oss['url']" mode="widthFix" @click="selectImage(index)" :data-url="item.oss['url']" @load="setImageSize"></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer" v-show="!showFooter">
			<view class="footer_all" @click="selectAll">
				<image :src="all?select_url[1]:select_url[0]"></image>
				<view class="">全选</view>
			</view>
			<view class="total" v-show="state === 2?!state:!status">合计：
				<text style="color: red;">￥{{ totalPrice >0? totalPrice.toFixed(2) : '0.00'}}</text>
			</view>
			<view class="settlement">
				<!-- <button @click="remove" v-if="state === 2?state:status">删除</button> -->
				<button @click="remove" v-if="status">删除</button>
				<button @tap="selectSettlement" v-else>结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["goods", "state", "seleState", "all", "status", "buyNumber", "noteList", 'noteState','showFooter'],
		data() {
			return {
				select_url: ['https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/7efb97c459984231adba489239078aaa.png',
					'https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/f9eb824f298940dcb22b2101b3f9a6da.png'
				],
			}
		},
		computed: {
			totalPrice() {
				let total = 0
				for (let key in this.goods) {
					total += (this.buyNumber[key] * 1) * (this.goods[key].price * 1)
				}
				return total
			}
		},
		methods: {
			// 检测图片大小
			setImageSize(event){
				this.$emit("setImageSize",event)
			},
			selectImage(index){
				this.$emit("selectImage",index)
			},
			// 选中事件
			select(index, id) {
				this.$emit("select", {
					index,
					id
				})
			},
			// 数量输入事件
			goods_buy_number_blur(e) {
				console.log(e, "e");
				var index = e.currentTarget.dataset.index || 0;
				var buy_number = parseInt(e.detail.value) || 1;
				this.goods_buy_number(index, buy_number);
			},
			goods_buy_number(type, index) {
				let goods = this.goods[index]
				let buyNumber = this.buyNumber[index] + type
				if (buyNumber < goods.buy_min_number) {
					buyNumber = goods.buy_min_number
					uni.showToast({
						title: "起购" + goods.buy_min_number + goods.inventory_unit
					})
					return false
				}
				if (buyNumber > goods.buy_max_number) {
					buyNumber = goods.buy_max_number
					uni.showToast({
						title: "限购" + goods.buy_max_number + goods.inventory_unit
					})
					return false;
				}
				if (buyNumber > goods.inventory) {
					buyNumber = goods.inventory

					uni.showToast({
						title: "库存数量" + goods.inventory + inventory_unit
					})
					return false;
				}
				// if(goods.stock == 1 && buyNumber == 1) return false
				this.$emit("set_buy_number", index, buyNumber)
				// 更新数据库
				uni.showLoading({
					title: '处理中...',
					mask: true
				});
				const data = {
					"id": goods.id,
					"goods_id": goods.goods_id,
					"stock": buyNumber
				}
				let url = app.globalData.get_request_url("cart/stock");
				uni.request({
					url: url,
					data: data,
					method:"POST",
					success: (res) => {
						uni.hideLoading();
						
					}
				})
			},
			selectAll() {
				this.$emit("selectAll")
			},
			remove() {
				this.$emit("remove")
			},
			selectSettlement() {
				this.$emit("selectSettlement")
			}
		},
		mounted() {
			console.log(this.noteState);
		}

	}
</script>

<style lang="less">
	// .note_list_img image{
	// 	width: 100%;
	// 	height: 500px !important;
	// }
	.mixin(@jc, @ai) {
		display: flex;
		justify-content: @jc;
		align-items: @ai;
	}

	.size(@w, @h) {
		width: @w;
		height: @h;
	}

	.cart_list {

		background-color: white;

		.cart_list_img {
			image {
				width: 100%;
				display: block;
				margin: auto;
			}
		}

		.goods_info {
			width: 100%;
			padding: 20rpx 0;
			.mixin(space-around, center);

			.select {
				width: 10%;

				image {
					.size(50rpx, 50rpx);
				}
			}

			.info {
				width: 80%;
				.mixin(start, center);

				.placard {

					margin-right: 20rpx;

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.details_info {
					width: 100%;
					.mixin(center, start);
					flex-direction: column;

					.info_title {
						width: 200px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						text:first-child {
							font-size: 25rpx;
							font-weight: bold;
							background-color: red;
							color: white;
							border-radius: 10rpx;
							padding: 10rpx 5rpx;
							margin-right: 10rpx;
						}
					}

					.detail {
						width: 200px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						text {
							font-size: 25rpx;
							color: #b5b5b5;
							margin-left: 10rpx;
						}

					}

					.price {
						width: 100%;
						.mixin(space-between, center);

						text:nth-child(1) {
							color: red;
							font-size: 13px;
						}

						.add {
							display: flex;
							justify-content: space-around;
							align-items: center;

							input {
								display: inline-block;
								border: #b5b5b5 1px solid;
								width: 50rpx;
								height: 50rpx;
								text-align: center;
								line-height: 50rpx;
							}

							text {
								display: inline-block;
								border: #b5b5b5 1px solid;
								width: 50rpx;
								height: 50rpx;
								text-align: center;
								line-height: 50rpx;
							}

						}

					}

				}

			}
		}
	}

	.note_list {
		width: 100%;
		padding: 20rpx 0;
		.mixin(space-around, center);

		.select {
			width: 10%;

			image {
				.size(50rpx, 50rpx);
			}
		}
	}

	.footer {
		z-index: 999;
		// .mixin(space-around, center);
		.mixin(space-between, center);
		position: fixed;
		bottom: 0;
		background-color: white;
		.size(100%, 100rpx);

		.footer_all {
			.mixin(space-between, center);

			image {
				.size(50rpx, 50rpx);
				margin: 0 20rpx;
			}
		}

		.settlement {
			button {
				margin-right: 20rpx;
				background-color: red;
				border-radius: 20rpx;
				color: white;
				.size(175rpx, 70rpx);
				text-align: center;
				line-height: 70rpx;
			}

		}
	}
</style>